Early Test
I had the keyboard prompt, and knew i wanted to explore adding randomized text. I wanted to play with the idea of contolled chaos so started the html with a simple box off. This container would hold all of the randomized fonts and characters
Initial Text Test
Originally I had just used one font and black and white colours. I also found an issue of the text staying only in the bottom left corner. I had used google and the sources from the assignment page to figure out how to do randomized placement but had not gotten it quite right yet.
Colour and font variations
After adjusting the random placement of text and was happy with the results, I thought the singular font and colour looked pretty boring. I then used what I learnt from the randomized placement alongw with continued help from google to use javascript to change the colours and font. I inserted around 5 font types that all looked different to add variation. I had a lot of difficulties with the colour aspect, I originally coded it to call from a list I put out, but then was doing research online and came across this method in a discussion board. Not quite sure what the values do but it matched my intended vision.
Controlled Chaos test
I had now gotten the font, colours, and positioning out of the way. I wanted to see what it looked like when the user kept typing:
Adding Backspace
I liked how it looked within the box, but wanted to add another interactive element. I figured the user might try to go back and delete and words they didn't want. But instead of achieving that, it would just multiple the characters on the screen outside the box. Adding even more chaos to the composition. I originally tried to code this fully on my own using the randomized placement method from earlier. I had a lot of trouble with this part. After forgetting about event listeners and a lot of googling, I finally combined a few of the external resources I used to create the desired effect now seen on the page. Everytime they backspace it will continue to multiple until the website is flooded with text.
Adding guides
I had thought upon entering the website the puropse might be a bit confusing. I decided to add a header within the container to guide the viewer to start typing:
Adding a restart key
I thought it was getting a bit annoying to keep refreshing the page to restart. I added an event listener tied to the escape key to reset the page easily. I added a little header at the bottom to inform the viewers of this option:
